/*
 * @Author: shawnxiao
 * @Date: 2021-12-08 14:10:54
 * @LastEditTime: 2021-12-23 16:16:18
 * @FilePath: /vite2-vue3-typescript/src/views/Tsx/components/Child.tsx
 */
import { CSSProperties, FunctionalComponent } from 'vue'
interface Props {
  count: number
  style: CSSProperties
  onChildClick: any
}
type Emit = {
  childClick: () => void
}

const Child: FunctionalComponent<Props, Emit> = (
  props: { [x: string]: any; count?: any },
  ctx: { slots: any; emit: any }
) => {
  const { count, ...rest } = props
  const { slots, emit } = ctx

  return (
    <div {...rest}>
      <h1>this is child</h1>
      {slots?.header && slots.header()}
      <button onClick={() => emit('childClick')}>child count++</button>
      <p>child count is: {count}</p>
      {slots?.default && slots.default()}
      <p>props keys: {Object.keys(props).join()}</p>
    </div>
  )
}

export default Child
